<template>
  <div>
    <div class="title_div" v-show="nologinshow">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="/">主页</el-menu-item>
        <el-menu-item index="/login">登录</el-menu-item>
        <el-menu-item index="/register">注册</el-menu-item>
        <el-menu-item index="/video">视频演示</el-menu-item>
        <div class="imgs">
          <el-image
            src="../../static/imgs/header/timg.gif"
            style="width: 100px; height: 50px"
          />
        </div>
      </el-menu>
    </div>
    <div class="title_div" v-show="loginshow">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="/">主页</el-menu-item>
        <el-menu-item index="/personalcenter">个人中心</el-menu-item>
        <div class="imgs">
          <el-image
            src="../../static/imgs/header/timg.gif"
            style="width: 100px; height: 50px"
          />
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginshow: true,
      nologinshow: false,
      activeIndex: this.$route.path,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      //传递key然后跳转路由
      this.$router.push(key);
    },
  },
  created() {
    if (localStorage.getItem("token") != null) {
      this.loginshow = true;
      this.nologinshow = false;
    } else {
      this.nologinshow = true;
      this.loginshow = false;
    }
    // 启动这个方法
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.el-menu-item {
  margin-left: 3vw;
  text-align: center;
}


</style>